<template>
    <div class="btmbar">
        <div class="playbar">
            <div class="updn">
                <div class="left f-fl">
                    <a class="btn"></a>
                </div>
                <div class="right f-fl"></div>
            </div>
            <div class="bg"></div>
            <div class="hand" title="展开播放条"></div>
            <div class="wrap" id="g_player" style="margin-left: -522.5px;">
                <div class="btns">
                    <a class="prv" title="上一首(ctrl+←)">上一首</a>
                    <a class="ply j-flag" title="播放/暂停(p)">播放/暂停</a>
                    <a class="nxt" title="下一首(ctrl+→)">下一首</a>
                </div>
                <div class="head j-flag">
                    <img src="http://p2.music.126.net/YaocPG1hCVMT3XmdQLa2CQ==/109951170678171051.jpg?param=34y34">
                    <a class="mask"></a>
                </div>
                <div class="play">
                    <div class="j-flag words">
                        <a class="f-thide name fc1 f-fl"
                            title="SKRILLEX&nbsp;IS&nbsp;DEAD">SKRILLEX&nbsp;IS&nbsp;DEAD</a>
                        <span class="by f-thide f-fl">
                            <span title="Skrillex">
                                <a class="">Skrillex</a>
                            </span>
                        </span>
                        <a class="src" title="来自专辑"></a>
                    </div>
                    <div class="m-pbar">
                        <div class="barbg j-flag" id="auto-id-EQ39k7JBaoB6ThAi">
                            <div class="rdy" style="width: 0px;"></div>
                            <div class="cur" style="width:0%;">
                                <span class="btn f-tdn" id="auto-id-elS6RneWG4Bl6Gks"><i></i>
                                </span>
                            </div>
                        </div>
                        <span class="j-flag time"><em>00:00</em> / 00:00</span>
                    </div>
                </div>
                <div class="oper f-fl">
                    <a class="icn icn-pip" title="画中画歌词">画中画歌词</a>
                    <a class="icn icn-add j-flag" title="收藏">收藏</a>
                    <a class="icn icn-share" title="分享">分享</a>
                </div>
                <div class="ctrl">
                    <!-- 声音组件 -->
                    <el-popover :popper-style="{
                        width: '32px',
                        height: '113px',
                        minWidth: '32px',
                        padding: '0'
                    }" placement="top" trigger="click" effect="dark">
                        <template #reference>
                            <a class="icn icn-vol"></a>
                        </template>
                        <template #default>
                            <div class="m-vol">
                                <div class="barbg"></div>
                                <div class="vbg j-t">
                                    <div class="curr j-t" style="height: 46.5px;"></div>
                                    <span class="btn f-alpha j-t" style="top: 40.5px;"></span>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                    <a class="icn icn-loop" title="循环"></a>
                    <span class="add f-pr">
                        <span class="add-tip" style="display:none;">已添加到播放列表</span>
                        <!-- 播放列表 -->
                        <el-popover :popper-style="{
                            width: '986px',
                            height: '301px',
                            left: '50%',
                            transform: 'translateX(-50%)',
                            padding: '0'
                        }" placement="top" trigger="click" effect="dark">
                            <template #reference>
                                <a title="播放列表" class="add-icn icn-list s-fc3">34</a>
                            </template>
                            <template #default>
                                <div class="play-list">
                                    <div class="listhd">
                                        <div class="listhdc">
                                            <h4>播放列表(<span class="j-flag">35</span>)</h4>
                                            <a class="addall">
                                                <span class="ico ico-add"></span>
                                                收藏全部
                                            </a>
                                            <span class="line"></span>
                                            <a class="clear">
                                                <span class="ico icn-del"></span>
                                                清除
                                            </a>
                                            <p class="lytit f-ff0 f-thide j-flag">蓝色</p>
                                            <span class="close">关闭</span>
                                        </div>
                                    </div>
                                    <div class="listbd">
                                        <img class="imgbg" src="//music.163.com/api/img/blur/109951167595273835"
                                            style="top: -360px;">
                                        <div class="msk"></div>
                                        <div class="listbdc">
                                            <ul class="f-cb">
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SKRILLEX IS DEAD</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">00:51</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347232"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="col col-1"></div>
                                                    <div class="col col-2">SPITFIRE</div>
                                                    <div class="col col-3">
                                                        <div class="icns">
                                                            <i class="ico icn-del" title="删除">删除</i>
                                                            <i class="ico ico-dl" title="下载">下载</i>
                                                            <i class="ico ico-share" title="分享">分享</i>
                                                            <i class="j-t ico ico-add" title="收藏">收藏</i>
                                                        </div>
                                                    </div>
                                                    <div class="col col-4">
                                                        <span title="Skrillex/HAWAII SLIM">
                                                            <a class="" href="/artist?id=43755">Skrillex</a>/
                                                            <a class="" href="/artist?id=51474740">HAWAII&nbsp;SLIM</a>
                                                        </span>
                                                    </div>
                                                    <div class="col col-5">01:29</div>
                                                    <div class="col col-6">
                                                        <a href="/album?id=267706756&amp;_hash=songlist-2690347220"
                                                            class="ico ico-src" title="来自专辑">
                                                            来源
                                                        </a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- <div class="bline">
                                            <span class="scrol"
                                                style="height: 68.9796px; display: block; top: 192px;"></span>
                                        </div> -->
                                        <div class="ask">
                                            <a class="ico ico-ask"></a>
                                        </div>
                                        <div class="upload" style="display: none;">
                                            <a href="/lyric/report?id=1959354904">报错</a>
                                        </div>
                                        <div class="msk2"></div>
                                        <div class="listlyric">
                                            <p class="j-flag">作词 : 唐思淼</p>
                                            <p class="j-flag">作曲 : 黄愚人</p>
                                            <p class="j-flag">编曲 : 百川</p>
                                            <p class="j-flag z-sel">制作人 : 百川</p>
                                            <p class="j-flag">消散 昨天的快乐</p>
                                            <p class="j-flag">弥漫 泛滥成蓝色</p>
                                            <p class="j-flag">轻轻的 你靠近了</p>
                                            <p class="j-flag">慢慢的 我哼着歌</p>
                                            <p class="j-flag">对白乱了 你却笑了</p>
                                            <p class="j-flag">世界亮了</p>
                                            <p class="j-flag"></p>
                                            <p class="j-flag">悄悄的 你走远了</p>
                                            <p class="j-flag">漫漫的 我在愈合</p>
                                            <p class="j-flag">偏偏回忆 又来招惹</p>
                                            <p class="j-flag">月色暗了</p>
                                            <p class="j-flag">蓝色 是虚空的 是神性的 是童话的 是你的</p>
                                            <p class="j-flag">蓝色 是执着的 是克制的 是隐秘的 是我的</p>
                                            <p class="j-flag">蓝色 最寂寞的 最忠诚的 最遥远的 伪装者</p>
                                            <p class="j-flag">蓝色 是你的</p>
                                            <p class="j-flag">遥不可攀的颜色</p>
                                            <p class="j-flag">像你无处不在牵扯</p>
                                            <p class="j-flag">放了手划定银河</p>
                                            <p class="j-flag">怎么还能与你应和</p>
                                            <p class="j-flag">两个人不动声色 两个人分开那刻</p>
                                            <p class="j-flag">我说真的 只有苦涩 失而复得</p>
                                            <p class="j-flag"></p>
                                            <p class="j-flag">是最迷惑的光泽</p>
                                            <p class="j-flag">让我化作扑火飞蛾</p>
                                            <p class="j-flag">用炙热换你认可</p>
                                            <p class="j-flag">爱了一次就死去了</p>
                                            <p class="j-flag">两个人情绪枯了 两个人换个景色</p>
                                            <p class="j-flag">我说真的 这种感觉 才到哪呢</p>
                                            <p class="j-flag">蓝色 是蛮荒的 是直接的 是尖锐的 是你的</p>
                                            <p class="j-flag">蓝色 是浪漫的 是愁郁的 是矛盾的 是我的</p>
                                            <p class="j-flag">蓝色 要安静的 要流浪的 要遗忘的 所以呢</p>
                                            <p class="j-flag">蓝色 是你的</p>
                                            <p class="j-flag">弦乐编写：百川Rebellious</p>
                                            <p class="j-flag">和声设计：陈鹏飞</p>
                                            <p class="j-flag">和声：陈鹏飞</p>
                                            <p class="j-flag">人声录音 : 江浩廷</p>
                                            <p class="j-flag">录音棚 : Star Master@Chengdu</p>
                                            <p class="j-flag">弦乐 : 国际首席爱乐乐团</p>
                                            <p class="j-flag">弦乐监制 : 李朋</p>
                                            <p class="j-flag">混音/母带 : 百川Rebellious</p>
                                        </div>
                                        <!-- <div class="bline bline-1">
                                            <span class="scrol scrol-1"
                                                style="height: 40.4403px; display: block; top: 0px;"></span>
                                        </div> -->
                                    </div>
                                </div>
                            </template>
                        </el-popover>
                    </span>
                    <a class="icn icn-audioquality"></a>
                    <div class="tip tip-1" style="display:none;">循环</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
// ========= 播放器列表样式 =========
.play-list {
    font-size: 12px;

    .listhd {
        background-position: 0 0;
        height: 41px;
        padding: 0 5px;
        background: url(../Player/icon/playlist_bg.png) no-repeat;

        .listhdc {
            position: relative;
            height: 40px;

            h4 {
                position: absolute;
                left: 25px;
                top: 0;
                height: 39px;
                line-height: 39px;
                font-size: 14px;
                color: #e2e2e2;
            }

            a {
                color: #ccc;

                &:hover {
                    color: #e2e2e2;
                    text-decoration: underline;
                }

                &:hover .ico-add {
                    background-position: -24px -20px !important;
                }
            }

            .addall {
                left: 398px;
                position: absolute;
                top: 12px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;

                .ico-add {
                    height: 16px;
                    line-height: 15px;
                    float: left;
                    margin: 1px 6px 0 0;
                    width: 16px;
                    background-position: -24px 0 !important;
                    background: url(../Player/icon/playlist.png) no-repeat;
                }
            }

            .line {
                position: absolute;
                top: 13px;
                left: 477px;
                height: 15px;
                border-left: 1px solid #000;
                border-right: 1px solid #2c2c2c;
            }

            .clear {
                position: absolute;
                left: 490px;
                top: 12px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;

                &:hover .icn-del {
                    background-position: -51px -20px !important;
                }

                .icn-del {
                    float: left;
                    margin: 1px 6px 0 0;
                    width: 13px;
                    background-position: -51px 0 !important;
                    height: 16px;
                    background: url(../Player/icon/playlist.png) no-repeat;
                }
            }

            .lytit {
                position: absolute;
                left: 595px;
                top: 0;
                width: 346px;
                text-align: center;
                height: 39px;
                line-height: 39px;
                color: #fff;
                font-size: 14px;
            }

            .close {
                position: absolute;
                top: 6px;
                right: 8px;
                width: 30px;
                height: 30px;
                overflow: hidden;
                text-indent: -999px;
                cursor: pointer;
                background-position: -195px 9px !important;
                background: url(../Player/icon/playlist.png) no-repeat;

                &:hover {
                    background-position: -195px -21px !important;
                }
            }
        }
    }

    .listbd {
        position: absolute;
        left: 0;
        top: 41px;
        width: 976px;
        height: 260px;
        overflow: hidden;
        background-position: -1014px 0 !important;
        padding: 0 5px;
        background-repeat: repeat-y;
        background: url(../Player/icon/playlist_bg.png);

        .imgbg {
            position: absolute;
            left: 2px;
            top: -360px;
            z-index: 1;
            width: 980px;
            height: auto;
            opacity: .2;
        }

        .msk {
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 2;
            width: 558px;
            height: 260px;
            background: #121212;
            opacity: .5;
        }

        .listbdc {
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 4;
            height: 260px;
            width: 553px;
            overflow: hidden;
            box-sizing: content-box;

            .f-cb {
                color: #ccc;
                height: 260px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 4px;
                }

                &::-webkit-scrollbar-track {
                    background: transparent;
                }

                &::-webkit-scrollbar-thumb {
                    background: #868686;
                    border-radius: 4px;
                    border: 1px solid #a6a6a6;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background: #737373;
                }

                li {
                    float: left;
                    width: 100%;

                    &:hover {
                        background-color: rgba(0, 0, 0, 0.4);
                    }

                    &:hover .icns {
                        display: block;
                    }

                    &:hover .col {
                        color: #fff;
                    }

                    &:hover a {
                        color: #fff;
                    }
                }

                .z-sel {
                    background-color: rgba(0, 0, 0, 0.3);
                }

                .col {
                    float: left;
                    padding-left: 10px;
                    height: 28px;
                    line-height: 28px;
                    overflow: hidden;
                    cursor: pointer;

                    a {
                        color: #9b9b9b;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .col-1 {
                    width: 10px;
                }

                .col-2 {
                    width: 266px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .col-3 {
                    width: 88px;
                    position: relative;
                }

                .col-4 {
                    width: 80px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .col-5 {
                    width: 45px;
                    color: #666;
                }

                .col-6 {
                    width: 43px;
                    padding-left: 6px;

                    .ico {
                        float: right;
                        overflow: hidden;
                        margin: 7px 0 0 10px;
                        text-indent: -9999px;
                        background: url(../Player/icon/playlist.png) no-repeat;
                    }

                    .ico-src {
                        width: 14px;
                        margin-left: 0;
                        background-position: -80px 0px !important;

                        &:hover {
                            background-position: -80px -20px !important;
                        }
                    }
                }

                .icns {
                    display: none;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 100px;
                    height: 23px;


                    .ico {
                        float: right;
                        overflow: hidden;
                        margin: 7px 0 0 10px;
                        text-indent: -9999px;
                        height: 16px;
                        background: url(../Player/icon/playlist.png) no-repeat;
                    }

                    .icn-del {
                        width: 13px;
                        background-position: -51px 0 !important;

                        &:hover {
                            background-position: -51px -20px !important;
                        }
                    }

                    .ico-dl {
                        width: 14px;
                        background-position: -57px -50px !important;

                        &:hover {
                            background-position: -80px -50px !important;
                        }
                    }

                    .ico-share {
                        width: 14px;
                        background-position: 0 0;

                        &:hover {
                            background-position: 0 -20px !important;
                        }
                    }

                    .ico-add {
                        width: 16px;
                        background-position: -24px 0 !important;

                        &:hover {
                            background-position: -24px -20px !important;
                        }
                    }
                }
            }
        }

        .bline {
            position: absolute;
            left: 555px;
            top: -1px;
            z-index: 2;
            width: 6px;
            height: 260px;
            background: #000;
            opacity: .5;

            .scrol {
                position: absolute;
                left: 0;
                width: 4px;
                border-radius: 5px;
                cursor: pointer;
                background: #868686;
                border: 1px solid #a6a6a6;
                opacity: .8;
            }
        }

        .ask {
            position: absolute;
            right: 25px;
            top: 12px;
            cursor: pointer;
            z-index: 5;

            .ico {
                background: url(../Player/icon/playlist.png) no-repeat;
            }

            .ico-ask {
                display: inline-block;
                width: 21px;
                height: 21px;
                background-position: 0 -50px;
                text-indent: 0;

                &:hover {
                    background-position: -24px -50px !important;
                }
            }
        }

        .upload {
            position: absolute;
            right: 12px;
            top: 40px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, .75);
            width: 81px;
            z-index: 5;

            a {
                display: block;
                text-align: center;
                padding: 8px 0;
                color: #666;
                background: #ebebeb;
                text-shadow: 0 1px 0 #fff;
            }
        }

        .msk2 {
            position: absolute;
            left: 560px;
            top: 0;
            z-index: 3;
            width: 420px;
            height: 250px;
            background: #121212;
            opacity: .01;
        }

        .listlyric {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 4;
            padding: 20px 0;
            // margin: 21px 0 20px 0;
            height: 250px;
            width: 420px;
            overflow: auto;

            &::-webkit-scrollbar {
                width: 4px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                background: #868686;
                border-radius: 4px;
                border: 1px solid #a6a6a6;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: #737373;
            }

            p {
                color: #989898;
                word-wrap: break-word;
                text-align: center;
                line-height: 32px;
                height: auto !important;
                min-height: 32px;
                transition: color 0.7s linear;
            }

            .j-flag {}

            .z-sel {
                color: #fff;
                font-size: 14px;
                transition: color 0.7s linear;
            }
        }

        .bline-1 {
            left: auto;
            right: 2px;

            .scrol {
                position: absolute;
                width: 4px;
                border-radius: 5px;
                cursor: pointer;
                background: #868686;
                border: 1px solid #a6a6a6;
                opacity: .8;
            }

            .scrol-1 {
                left: auto;
                right: 0;
            }
        }
    }
}

// ========= 声音音量样式 =========
.m-vol {
    // position: absolute;
    // top: -113px;
    // left: 9px;
    clear: both;
    width: 32px;
    height: 113px;

    .barbg {
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 113px;
        background-position: 0 -503px !important;
        background: url(../../components/Player/icon/playbar.png) no-repeat;
    }

    .vbg {
        padding: 4px 0;
        top: 7px;
        position: absolute;
        left: 14px;
        width: 4px;
        height: 93px;
        background-color: #333;

        .curr {
            position: absolute;
            top: auto;
            bottom: -5px;
            left: 0;
            // height: 46.5px;
            width: 4px;
            background-position: -40px bottom !important;
            background: url(../../components/Player/icon/playbar.png) no-repeat;
            overflow: hidden;
        }

        .btn {
            position: absolute;
            top: 40.5px;
            left: -7px;
            display: block;
            width: 18px;
            height: 20px;
            background-position: -40px -250px !important;
            background: url(../../assets/Home/Recommend/iconall.png) no-repeat;
            cursor: pointer;

            &:hover {
                background-position: -40px -280px !important;
            }
        }
    }

    .j-t {}
}

// ========= 播放器底部样式 =========
.btmbar {
    position: fixed;
    zoom: 1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    z-index: 1002;

    .playbar {
        position: absolute;
        zoom: 1;
        top: -53px;
        left: 0;
        width: 100%;
        height: 53px;
        margin: 0 auto;
        visibility: visible;

        .updn {
            position: relative;
            z-index: 11;

            .left {
                position: absolute;
                top: -14px;
                right: 15px;
                width: 52px;
                height: 67px;
                background-position: 0 -380px !important;
                background: url(../../components/Player/icon/playbar.png) no-repeat;

                .btn {
                    display: block;
                    width: 18px;
                    height: 18px;
                    margin: 6px 0 0 17px;
                    background-position: -100px -380px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;

                    &:hover {
                        background-position: -100px -400px !important;
                    }
                }
            }

            .right {
                position: absolute;
                top: -1px;
                right: 0;
                width: 15px;
                height: 54px;
                background-position: -52px -393px !important;
                pointer-events: none;
                background: url(../../components/Player/icon/playbar.png) no-repeat;
            }
        }

        .bg {
            height: 53px;
            zoom: 1;
            margin-right: 67px;
            background-position: 0 0;
            background-repeat: repeat-x;
            background: url(../../components/Player/icon/playbar.png);
        }

        .hand {
            position: absolute;
            top: -10px;
            width: 100%;
            height: 20px;
            cursor: pointer;
        }

        .wrap {
            position: absolute;
            left: 50%;
            top: 6px;
            z-index: 15;
            width: 1030px;
            height: 47px;
            margin: 0 auto;
            margin-left: -522.5px;

            .btns {
                float: left;
                width: 137px;
                padding: 6px 0 0 0;

                a {
                    display: block;
                    float: left;
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    margin-top: 5px;
                    text-indent: -9999px;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;
                }

                .prv {
                    background-position: 0 -130px !important;

                    &:hover {
                        background-position: -30px -130px !important;
                    }
                }

                .ply {
                    width: 36px;
                    height: 36px;
                    margin-top: 0;
                    background-position: 0 -204px !important;

                    &:hover {
                        background-position: -40px -204px !important;
                    }
                }

                .nxt {
                    background-position: -80px -130px !important;

                    &:hover {
                        background-position: -110px -130px !important;
                    }
                }
            }

            .head {
                float: left;
                position: relative;
                margin: 6px 15px 0 0;
                width: 34px;
                height: 34px;

                img {
                    width: 34px;
                    height: 34px;
                    border: 0;
                }

                .mask {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    display: block;
                    width: 34px;
                    height: 35px;
                    background-position: 0 -80px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;
                }
            }

            .play {
                float: left;
                position: relative;
                width: 581px;

                .f-thide {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-wrap: normal;
                }

                .by {
                    max-width: 220px;
                    margin-left: 15px;
                    color: #9b9b9b;

                    a {
                        color: #9b9b9b;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .name {
                    max-width: 300px;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                .fc1 {
                    color: #e8e8e8;
                }

                .f-fl {
                    float: left;
                }

                .src {
                    float: left;
                    width: 14px;
                    height: 15px;
                    margin: 7px 0 0 13px;
                    background-position: -110px -103px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;

                    &:hover {
                        background-position: -130px -103px !important;
                    }
                }

                .words {
                    height: 28px;
                    overflow: hidden;
                    color: #e8e8e8;
                    text-shadow: 0 1px 0 #171717;
                    line-height: 28px;
                }

                .m-pbar {
                    position: relative;
                    width: 466px;

                    .barbg {
                        width: 466px;
                        height: 9px;
                        background-position: right 0 !important;
                        background: url(../../components/Player/icon/statbar.png) no-repeat;

                        .rdy {
                            background-position: right -30px !important;
                            background: url(../../components/Player/icon/statbar.png) no-repeat;
                        }

                        .cur {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 1%;
                            height: 9px;
                            background-position: left -66px !important;
                            background: url(../../components/Player/icon/statbar.png) no-repeat;

                            .btn {
                                position: absolute;
                                top: -7px;
                                right: -13px;
                                width: 22px;
                                height: 24px;
                                margin-left: -11px;
                                background-position: 0 -250px !important;
                                background: url(../../assets/Home/Recommend/iconall.png) no-repeat;

                                &:hover {
                                    background-position: 0 -280px !important;
                                }
                            }
                        }
                    }

                    .time {
                        position: absolute;
                        top: -3px;
                        right: -84px;
                        color: #797979;
                        text-shadow: 0 1px 0 #121212;

                        em {
                            color: #a1a1a1;
                            font-style: normal;
                            text-align: left;
                            font-size: inherit;
                        }
                    }
                }
            }

            .oper {
                width: 87px;
                float: left;

                .icn {
                    float: left;
                    width: 25px;
                    height: 25px;
                    margin: 11px 2px 0 0;
                    text-indent: -9999px;
                }

                .icn-pip {
                    position: relative;
                    background: url(../../components/Player/icon/DLVi.png) no-repeat 0 0;

                    &:hover {
                        background-position-y: -25px !important;
                    }
                }

                .icn-add {
                    background-position: -88px -163px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;

                    &:hover {
                        background-position: -88px -189px !important;
                    }
                }

                .icn-share {
                    background-position: -114px -163px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;

                    &:hover {
                        background-position: -114px -189px !important;
                    }
                }
            }

            .ctrl {
                position: relative;
                z-index: 10;
                float: left;
                width: 160px;
                padding-left: 13px;
                background-position: -147px -238px !important;
                background: url(../../components/Player/icon/playbar.png) no-repeat;

                .icn {
                    float: left;
                    width: 25px;
                    height: 25px;
                    margin: 11px 2px 0 0;
                    text-indent: -9999px;
                }

                .icn-vol {
                    background-position: -2px -248px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;

                    &:hover {
                        background-position: -31px -248px !important;
                    }
                }

                .icn-loop {
                    background-position: -3px -344px !important;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;

                    &:hover {
                        background-position: -33px -344px !important;
                    }
                }

                .add {
                    float: left;
                    // width: 59px;
                    height: 36px;

                    .add-tip {
                        position: absolute;
                        top: -51px;
                        left: -65px;
                        clear: both;
                        width: 152px;
                        height: 49px;
                        background-position: 0 -287px !important;
                        text-align: center;
                        color: #fff;
                        line-height: 37px;
                        background: url(../../components/Player/icon/playbar.png) no-repeat;
                    }

                    .add-icn {
                        height: 25px;
                        margin: 11px 2px 0 0;
                        background: url(../../components/Player/icon/playbar.png) no-repeat;
                    }

                    .icn-list {
                        display: block;
                        float: none;
                        width: 38px;
                        padding-left: 21px;
                        background-position: -42px -68px !important;
                        line-height: 27px;
                        text-align: center;
                        color: #666;
                        text-shadow: 0 1px 0 #080707;
                        text-indent: 0;
                        text-decoration: none;

                        &:hover {
                            background-position: -42px -98px !important;
                            text-decoration: none;
                        }
                    }

                    .s-fc3 {
                        color: #666;
                    }
                }

                .icn-audioquality {
                    background: url(../Player/icon/audio-quality.png) no-repeat;
                    background-size: 45px 30px;
                    margin-left: 4px;
                    width: 41px;
                    margin-top: 9px;

                    &:hover {
                        background: url(../Player/icon/audio-quality-hover.png) no-repeat;
                        background-size: 45px 30px;
                        margin-left: 4px;
                        width: 41px;
                        margin-top: 9px;
                    }
                }


                .tip {
                    position: absolute;
                    clear: both;
                    text-align: center;
                    color: #fff;
                    background: url(../../components/Player/icon/playbar.png) no-repeat;
                }

                .tip-1 {
                    top: -35px;
                    left: 12px;
                    width: 81px;
                    height: 39px;
                    line-height: 34px;
                    background-position: 0 -457px !important;
                }
            }

        }
    }
}
</style>